<template>
  <!-- 表单 -->

  <el-form :border="true" :inline="true" :model="list" class="demo-form-inline">
    <div class="container">
      <div class="left">
        <el-form-item
          v-for="(item, index) in list.modes"
          :key="index"
          :label="item.label"
        >
          <!-- inupt 输入 -->
          <template v-if="item.formType == 'input'">
            <el-input
              v-model="item.value"
              :placeholder="item.placeholder"
            ></el-input>
          </template>

          <!-- select 选择器 -->
          <template v-if="item.formType == 'select'">
            <el-select
              v-model="item.value"
              filterable
              :placeholder="item.placeholder"
              @change="changeValue"
            >
              <el-option
                v-for="(cItem, index) in item.select"
                :key="index"
                :label="cItem.label"
                :value="cItem.value"
              >
              </el-option>
            </el-select>
          </template>

          <!-- 时间点 -->
          <template v-if="item.formType == 'date'">
            <div>
              <el-date-picker
                value-format="yyyy-MM-dd"
                type="date"
                :placeholder="item.placeholder"
                v-model="item.value"
              ></el-date-picker>
            </div>
          </template>

          <!-- 时间段 -->
          <template v-if="item.formType == 'datePicker'">
            <el-date-picker
              :clearable="false"
              v-model="item.value"
              :type="item.pickerType"
              :placeholder="item.placeholder"
              :range-separator="item.rangeSeparator"
              :start-placeholder="item.startPlaceholder"
              :end-placeholder="item.endPlaceholder"
              @change="changeValue"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </template>

          <!-- 没有输入类型 -->
          <template v-if="item.formType == undefined">
            <el-input
              v-model="value"
              :placeholder="item.placeholder"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <div class="right">
            <el-button @click="onSubmitFn" type="primary" round>{{
              title
            }}</el-button>
            <el-button @click="resetFn" round>重设</el-button>

            <el-button
              v-hasPermi="[config.quanxian]"
              type="primary"
              plain
              size="mini"
              @click="addFn"
              v-if="config.isAdd"
              >新增</el-button
            >
          </div>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "查询",
    },
    config: {
      type: Object,
      default: () => {
        return {
          isAdd: false,
        };
      },
    },
    list: {
      type: Object,
    },
    /*
    list{
      modes:[
        {
        placeholder:"占位符号"
        formType:"input",
        label:"标题"，
				mode: 'key',
        value:"v-model绑定的值"
        },
          {
        placeholder:"占位符号"
        formType:"select",
        label:"选择类型"，
        value:"v-model绑定的值"
				mode: 'key',
        select:[
          {
          label:"option标题",
          vlaue"option的值"
          }
        ]
        }
      ]
    }
    */
  },

  data() {
    return {
      value: "",
      value1: "",
    };
  },
  mounted() {
    // console.log(document.querySelector(".el-range__close-icon"));
    // document.querySelector(".el-range__close-icon").onclick = () => {
    //   console.log("chfuale");
    // };
  },
  methods: {
    // 新增按钮
    addFn() {
      this.$emit("eventAdd");
    },
    //   所有的form的value传递给父组件
    onSubmitFn() {
      let arr = [];
      this.list.modes.forEach((item) => {
        arr.push({ [item.mode]: item.value });
      });

      this.$emit("EventOnsubmit", arr);
    },
    // 重设所有的form
    resetFn() {
      this.list.modes.forEach((item) => {
        // 后端null就是空。""再后端筛选时间就时会出问题
        item.value = null;
      });
      //传递重置事件
      this.$emit("EventReset");
    },
    // 选择改变时候
    changeValue(value) {
      this.$emit("EventChange", value);
      if (value === null) {
        console.log(value, "");
        this.$emit("EventDatePicker", null);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";

::v-deep .container {
  .left {
    display: flex;
    align-items: center;
  }

  .right {
    // margin-top: 41px;
    // margin-left: 110px;
    // line-height: 35px;
    align-items: center;
    display: flex;
    // margin-bottom: 10px;
    .el-button {
      padding: 6px 15px;
      font-size: 14px;
    }
    .el-button--primary {
      background-color: #f87a23;
      border-color: #f87a23;
    }
  }
}
::v-deep .el-form-item {
  display: flex;
  flex-direction: column;
  // width: 300px;
  margin-bottom: 0px;
}
::v-deep .container .left .el-form-item:last-child {
  margin-right: 0px;
}
::v-deep .el-form-item__label {
  // width: 1px;
  text-align: start;
}
::v-deep .el-input--medium {
  width: 170px !important;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  width: 200px;
}
::v-deep .el-range-editor--medium .el-range-input {
  width: 80px;
  font-size: 11px;
}
::v-deep .el-range-editor.el-input__inner {
  width: 200px;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-date-editor.el-input {
  width: 100%;
}

@media (max-width: 1180px) {
  ::v-deep .el-input--medium {
    width: 120px !important;
  }
}
</style>